<template>
	<view class="mourning-box">
    <u-navbar
        :placeholder="true"
        bgColor="#e0cb77"
        :safeAreaInsetTop="true"
    >
      <view slot="left">
        <u-icon
            name="arrow-left"
            size="20"
            color="#ffffff"
            @click="back"
        />
      </view>
      <view slot="right">
        <u-search placeholder="请输入搜索内容" :actionStyle="{color:'#ffffff'}"  actionText="订单"  />
      </view>

    </u-navbar>
		<u-swiper :list="swiperList" @change="(e) => (current = e.current)">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
    <view class="nav-bar">
      <view class="nav-item" v-for="(item,i) in navList " :key="i" @click="navClick(i,item)">
        <text class="nav-title">{{item.label}}</text>
        <u-icon name="arrow-down-fill" size="12" color="#000000"/>
        <u-picker :show="item.show" :ref="item.key"  v-if="activeIndex===i" :columns="item.list" :keyName="item.keyName" :loading="item.loading"  @change="item.change"   @cancel="item.show=false"  @confirm="(e)=>item.confirm(e,item)"  />
      </view>
    </view>
    <view class='box-list'>
        <view class="box"  :class="{'active':index===activeBoxIndex}" v-for="(box,index) in boxList" @click="boxClick(box,index)">
          <view>{{box.label}}</view>
        </view>
    </view>
    <view class="shop-list">
      <view class="shop" v-for="shop in shopList" :key="shop.id">
        <view class="shop-img">
            <u--image :src="shop.front_figure" width="60px" height="60px"  shape="square" :radius="3"/>
        </view>
        <view class="context">
            <view class="title">{{shop.store_name}}</view>
            <view class="box">
              <text>销量{{shop.shop_sales}}</text>
              <text>评分{{shop.shop_score}}</text>
            </view>
            <view class="sub">{{shop.shop_introduction}}</view>
        </view>
        <view class="distance">{{shop.distance}}km</view>
      </view>
    </view>
	</view>
</template>
<script>
import url from '@api/mourning'
import city from '@/utils/city-uview'
import area from '@/utils/area'
import province from  '@/utils/province'





	export default {
		data() {
			return {
				current: 0,
				currentNum: 0,
        swiperList: [],
        index:0,
        navList:[
            {
              label:'区域',
              key:'city',
              show:false,
              list:[province,city[0],area[0][0]],
              keyName:'label',
              confirm:async (array,item)=>{

              const label= array.value.map(item=>item.label).join('-')

                item.label=label
                item.show=false
                item.value=array.value

                await this.getShopList()


              },
              loading:false,
              value:'',
                change:async (e)=>{
                  const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs['city']
                  } = e
                  // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                  if (columnIndex === 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    this.index=index;
                    picker.setColumnValues(1,city[index])
                    picker.setColumnValues(2,area[this.index][0])
                  }

                  if (columnIndex === 1) {
                    // picker为选择器this实例，变化第二列对应的选项
                    console.log(city[index])
                    picker.setColumnValues(2,area[this.index][index])
                  }

                }
            },
          {
            label:'宗教',
            key:'religious',
            show:false,
            list:[],
            value:'',
             confirm:async (array,item)=>{
              item.label=array.value[0]
              item.show=false
              item.value= item.label

              await this.getShopList()

            },
            change:()=>{},
            loading:false
          },
        ],
        city: city[0],
        areas: area[0][0],
        activeIndex:0,
        boxList:[
            {label:'评分最高',sort_type:0},
            {label:'订单最多',sort_type:1},
            {label:'离我最近',sort_type:2},
            {label:'价格最优',sort_type:3},
        ],
        activeBoxIndex:0,
        shopList:[],
        sort_type:0,
			};
		},
    methods:{
       async getSwiperImg(){
          const {data}=  await this.$axios({url:url.getSwiperImg,method: 'post'})
         this.swiperList=JSON.parse(data[0].shuffling_img).map(item=>'http://service-white-gragon.ascetic.top/storage/'+item)



      },
      async getReligious(){
         const item= this.navList[1];
        item.loading=true
        const {data}=  await this.$axios({url:url.religious})
        item.list=[data.list]
        item.value=data.list[0]
        item.loading=false

      },
      back(){
         uni.navigateBack({
           delte:1
         })
      },
      navClick(i,item){
        this.activeIndex=i
        item.show=true

      },
      async boxClick(box,i)
      {
          this.activeBoxIndex=i;
          this.sort_type=box.sort_type

        console.log(this.sort_type)
          await this.getShopList()

      },

      async getShopList(){

         const  shop_city=this.navList[0].value[0]

         const  shop_area=this.navList[0].value[2]
         const {data}=await this.$axios({url:url.shop_list,method:'post',data:{
             sort_type:this.sort_type,
             shop_area:shop_area?.label,
             shop_city:shop_city?.label,
              lng:0,
             lat:0,
             religious:this.navList[1].value,
             shop_search:'',
           }})

        this.shopList=data
      }
    },
    computed:{
    },

   async created(){

      await Promise.all([this.getSwiperImg(), this.getReligious(), this.getShopList()])


    }
	};
</script>
<style scoped lang="scss">

.mourning-box{
  background: #e0cb77;
  min-height: 100vh;
}

.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #FFFFFF;
    font-size: 12px;
  }
}
/deep/.u-icon--right{
  color:#ffffff;
}
/deep/ .u-navbar__content__right{
  width: 88vw;
  display:block!important;
  position:static;
  padding: 0 0 0 13px;
}
/deep/.u-navbar__content{
    color:#ffffff;
}

.nav-bar{
  margin-top: 20rpx;
  height: 96rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
    .nav-item{
      height: 100%;
      display: flex;

      align-items: center;
      text-align: center;
      justify-content: center;
      padding: 0 20rpx;
      .nav-title{
        padding-right: 10rpx;
        color:#000000;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
}
.box-list{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20rpx 0;
  .box{
    background: #ffffff;
    color:#505050;
    width: 156rpx;
    text-align: center;
    border-radius: 16px;
    font-size: 24rpx;

  }
  .active{
    background: #e79a51;
    color:#ffffff;
  }
}

.shop-list{
  .shop{
    margin: 20rpx 16rpx ;
    background: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    padding: 12rpx 24rpx 12rpx  85px;
    display: flex;
    position: relative;
    .shop-img{
      position: absolute;
      left: 24rpx;
      top: 24rpx;

    }
    .context{
      .title{
        font-size: 28rpx;
        font-weight: bold;
      }
    }
    .box{
      color:#a6a6a6;
      font-size: 24rpx;
      text{
        margin-right:  5rpx;
      }

    }
    .sub{
      height: 90rpx;
      color:#a6a6a6;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 24rpx;

    }

    .distance{
      position: absolute;
      top:24rpx;
      right: 24rpx;
      font-size: 28rpx;
      color:#000000;
    }

  }

}



</style>
